feat: Add clip-path support for Android #54701

paradowstack · 2025-11-26T12:57:28Z

Summary:

This PR adds support for clip-path CSS attribute for JS. It follows CSS spec described here. It does not provide support for SVG source (<clip-source> values), what can be added in the additional PR if needed. Supported syntax is [<basic-shape>] || <geometry-box>] with almost full support of every basic shape (<basic-shape> = circle | ellipse | rect | polygon | inset | xywh) and references boxes (<geometry-box> = margin-box | border-box | padding-box | content-box | fill-box | stoke-box | view-box).

Work has been split into three PRs for more convenient reviewing process. This part adds Android support for clipping, path and bounds calculations.

Changelog:

[ANDROID] [ADDED] - Add clip-path support for Android

Test Plan:

Merge JS PR and run RNTester app.

Test Clip Path screen in RNTester app (ClipPathExample.js)

meta-codesync · 2025-12-01T17:57:27Z

@jorge-cab has imported this pull request. If you are a Meta employee, you can view this in D88081136.

jorge-cab

A few things here

Right now we are repeating ourselves on every view React Native uses to get clipping correct. I'm hoping there's a better solution. I think we can leverage CompositeBackgroundDrawable

We can try adding a parameter to CompositeBackgroundDrawable's constructor for clipPath. Then let's override draw and clip the canvas there, after which we can call super.draw() don't save/restore, this way the clipping will persist through the entire view's drawing logic since the canvas is shared between the background and the view itself.

This way we avoid the tag, and avoid having to add logic to every single view and also better justify adding the clipping logic to BackgroundStyleApplicator

I'm pretty sure backgrounds are drawn before any of the view's drawing operations so the canvas should remain clipped for any subsequent operations.

I'm really hoping this makes sense since it seems pretty messy to modify every view's drawing methods to get this to work.

@joevilches can you sanity check this?

I might have inaccuracies in my theory here so happy to discuss this a bit more.

Also added some comments that apply regardless of the approach

jorge-cab · 2025-12-01T19:51:52Z

.../react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/ClipPathUtils.kt

+import com.facebook.react.uimanager.LengthPercentageType
+import com.facebook.react.uimanager.PixelUtil
+
+public object ClipPathUtils {


Let's make this internal

jorge-cab · 2025-12-01T19:52:30Z

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/ClipPath.kt

+  }
+}
+
+public data class CircleShape(


Let's make all of the added classes internal. We don't want them to be part of the public API without a good reason

done - with current solution only ClipPath class is public since it's required by helper function getClipPath in BackgroundStyleApplicator.kt

jorge-cab · 2025-12-01T21:12:52Z

...eact-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/GeometryBoxUtil.kt

@@ -0,0 +1,178 @@
+/*


What's the reasoning behind putting this under react/view/views? This is only used in the uimanager/styles package right? It seems to me like that's a better fit?

it's a leftover from the previous versions of code - uimanager/styles is much better place now definitely!

jorge-cab · 2025-12-01T21:25:04Z

...es/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.kt

+  @ReactProp(name = ViewProps.CLIP_PATH, customType = "ClipPath")
+  public override fun setClipPath(view: ReactViewGroup, clipPath: ReadableMap?) {
+    if (ViewUtil.getUIManagerType(view) == UIManagerType.FABRIC) {
+      BackgroundStyleApplicator.setClipPath(view, clipPath)
+    }
+  }
+


I think adding to BaseViewManager is enough, no need to override here

You're correct - dropped this method

jorge-cab · 2025-12-01T21:26:46Z

...es/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.kt

+@ReactPropGroup(
+      names =
+          [
+              ViewProps.MARGIN,
+              ViewProps.MARGIN_VERTICAL,
+              ViewProps.MARGIN_HORIZONTAL,
+              ViewProps.MARGIN_LEFT,
+              ViewProps.MARGIN_RIGHT,
+              ViewProps.MARGIN_TOP,
+              ViewProps.MARGIN_BOTTOM,
+              ViewProps.MARGIN_START,
+              ViewProps.MARGIN_END
+          ],
+      defaultFloat = Float.NaN,
+  )
+  public open fun setMargin(view: ReactViewGroup, index: Int, margin: Float) {
+
+    val layoutParams = view.layoutParams as? MarginLayoutParams ?: MarginLayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
+    val leftMargin = layoutParams.leftMargin;
+    val topMargin = layoutParams.topMargin;
+    val rightMargin = layoutParams.rightMargin;
+    val bottomMargin = layoutParams.bottomMargin;
+    when (MarginIndex.fromIndex(index)) {
+      MarginIndex.ALL -> {
+        layoutParams.setMargins(margin.toInt(), margin.toInt(), margin.toInt(), margin.toInt())
+      }
+      MarginIndex.VERTICAL -> {
+        layoutParams.setMargins(leftMargin, margin.toInt(), rightMargin, margin.toInt())
+      }
+      MarginIndex.HORIZONTAL -> {
+        layoutParams.setMargins(margin.toInt(), topMargin, margin.toInt(), bottomMargin)
+      }
+      MarginIndex.LEFT -> {
+        layoutParams.setMargins(margin.toInt(), topMargin, rightMargin, bottomMargin)
+      }
+      MarginIndex.RIGHT -> {
+        layoutParams.setMargins(leftMargin, topMargin, margin.toInt(), bottomMargin)
+      }
+      MarginIndex.TOP -> {
+        layoutParams.setMargins(leftMargin, margin.toInt(), rightMargin, bottomMargin)
+      }
+      MarginIndex.BOTTOM -> {
+        layoutParams.setMargins(leftMargin, topMargin, rightMargin, margin.toInt())
+      }
+      MarginIndex.START -> {
+        layoutParams.setMargins(margin.toInt(), topMargin, rightMargin, bottomMargin)
+      }
+      MarginIndex.END -> {
+        layoutParams.setMargins(leftMargin, topMargin, margin.toInt(), bottomMargin)
+      }
+      null -> {
+        // Unknown index, do nothing
+      }
+    }
+    view.layoutParams = layoutParams
+  }


This looks unrelated? Correct me if I'm wrong

The purpose of it is to access margins in the GeometryBoxUtil.kt functions, it's done via view's layoutParams property. Without this population I couldn't get the node's margins, which are required to calculate properly both geometry box bounds and border radius. I couldn't find any other way to obtain these values, I didn't like this solution and would love to replace it and get View margins from some other place.

Instead of storing margins in view's layoutParams, I could store it as Spacing type directly in BackgroundStyleApplicator or in CompositeBackgroundDrawable (if it will be used). It will make this function shorter and perhaps more correct. What do you think about it?

jorge-cab · 2025-12-01T22:11:58Z

...es/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.kt

+  private enum class MarginIndex {
+    ALL,
+    VERTICAL,
+    HORIZONTAL,
+    LEFT,
+    RIGHT,
+    TOP,
+    BOTTOM,
+    START,
+    END;
+
+    companion object {
+      fun fromIndex(index: Int): MarginIndex? = values().getOrNull(index)
+    }
+  }


Also maybe unnecessary?

Right now it's used to properly set layout's margins, at least to make when block looking a bit nicer.

jorge-cab · 2025-12-01T22:58:15Z

...ges/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.kt

  public override fun hasOverlappingRendering(): Boolean = false

+  public override fun draw(canvas: Canvas) {
+    canvas.withSave {


This is a perf concern. canvas.withSave will do canvas.save and then canvas.restore on every draw operation even when we aren't clipping anything. We should gate this properly

I replaced all usages of canvas.withSave to conditional block. I added a getClipPath function to BackgroundStyleApplicator class in order to access the view's tag only there, not in every View class that calls applyClipPathIfPresent() function.

jorge-cab · 2025-12-01T22:58:30Z

...ct-native/ReactAndroid/src/main/java/com/facebook/react/views/text/PreparedLayoutTextView.kt

    }
-
-    super.onDraw(canvas)
+    canvas.withSave {


Same here, don't run this unconditionally

jorge-cab · 2025-12-01T22:59:00Z

.../react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.kt

  }

+  public override fun draw(canvas: Canvas) {
+    canvas.withSave {


Same here, don't do this unconditionally

jorge-cab · 2025-12-01T22:59:46Z

...ct-native/ReactAndroid/src/main/java/com/facebook/react/views/text/PreparedLayoutTextView.kt

    }
-
-    super.onDraw(canvas)
+    canvas.withSave {


Why do we sometimes run this code on onDraw and sometimes on draw? We should probably be consistent and just do it on draw every time.

paradowstack · 2025-12-02T17:15:03Z

Thanks @jorge-cab for the comments and review!

We can try adding a parameter to CompositeBackgroundDrawable's constructor for clipPath. Then let's override draw and clip the canvas there, after which we can call super.draw() don't save/restore, this way the clipping will persist through the entire view's drawing logic since the canvas is shared between the background and the view itself.
...
I'm pretty sure backgrounds are drawn before any of the view's drawing operations so the canvas should remain clipped for any subsequent operations.

Generally I definitely like your proposed solution much more, but I have tried this approach initially but couldn't get it to work - children were not clipped, only background was. I noticed that BackgroundStyleApplicator.clipToPaddingBox() function is used in several View classes and followed went that way.

I made a second attempt today and ended up with the same result. After the investigation and debugging I noticed that the reason why children may not be clipped is hardware acceleration. In this case drawing of background is isolated and canvas state not shared with the View's drawing (see drawBackground function of View.java). At least this is my understanding so far, I will try to validate that and investigate further but would like to hear you thoughts on that.

meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Nov 26, 2025

paradowstack mentioned this pull request Nov 26, 2025

feat: Add clip-path CSS attribute JS support #54699

Open

paradowstack marked this pull request as ready for review November 26, 2025 13:51

facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Nov 26, 2025

jorge-cab reviewed Dec 1, 2025

View reviewed changes

paradowstack added 5 commits December 2, 2025 11:20

feat: add clip-path support for Android

21941cc

refactor: change visibility to internal

867e08f

refactor: update drawing methods to always use draw()

adb425a

refactor: move file to correct dir

36fd052

fix: offset bounds by drawingRect topLeft

295c373

paradowstack force-pushed the feat/clip-path-android branch from d88ccd2 to 7d87540 Compare December 2, 2025 16:21

refactor: run canvas save/restore conditionally

aa37081

paradowstack force-pushed the feat/clip-path-android branch from 7d87540 to aa37081 Compare December 2, 2025 17:03

feat: Add clip-path support for Android #54701

Are you sure you want to change the base?

feat: Add clip-path support for Android #54701

Conversation

paradowstack commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Changelog:

Test Plan:

Uh oh!

meta-codesync bot commented Dec 1, 2025

Uh oh!

jorge-cab left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

paradowstack Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

paradowstack commented Dec 2, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

paradowstack commented Nov 26, 2025 •

edited

Loading

paradowstack Dec 2, 2025 •

edited

Loading